<template>
    <view class="paper-list">
        <zero-custom-bar :singleIcon="true" :title="type == 0 ? '理论考试记录' : type == 1 ? '科三考试记录' : '科一考试记录'" color="#fff"
            :singleIconType="'back'">
        </zero-custom-bar>
        
        <!-- 工种卡片滑动区 -->
        <view class="swiper-container">
            <swiper class="type-swiper" :circular="circular" :current="current" :next-margin="next" @change="handleTypeChange">
                <swiper-item @click="handleItemClick(index)" v-for="(type, index) in orderList" :key="index"
                    class="type-item">
                    <view class="type-card" :class="{ 'active': current === index }">
                        <view class="type-info">
                            <view class="type-info-box">
                                <text class="type-name">{{ type.title }}</text>
                                <button class="btn-start" @click.stop="handleStartExam(type.opc)">
                                    <text>模拟考试</text>
                                    <text class="iconfont icon-erjiyemianjiantou01"></text>
                                </button>
                            </view>
                            <view class="type-stats">
                                <view class="stat-item">
                                    <text class="stat-num">{{ total }}</text>
                                    <text class="stat-label">考试次数</text>
                                </view>
                                <view class="stat-item">
                                    <text class="stat-num success">{{ passCount }}</text>
                                    <text class="stat-label">合格次数</text>
                                </view>
                                <view class="stat-item highlight">
                                    <text class="stat-num" :class="{ 'warning': total > 0 && (passCount / total) < 0.6 }">
                                        {{ total == 0 ? 0 : Math.round(passCount / total * 100) }}%
                                    </text>
                                    <text class="stat-label">合格率</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </swiper-item>
            </swiper>
        </view>

        <!-- 考试记录列表 -->
        <scroll-view class="exam-list" scroll-y @scrolltolower="loadMore" refresher-enabled
            :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
            <view class="exam-item" v-for="(exam, index) in examList" :key="index"
                :class="{ 'low-score': exam.correct < Math.ceil(exam.num * 0.85) }">
                <view class="exam-header" v-if="type == 2">
                    <text class="exam-type">{{ exam.name }}</text>
                </view>
                <view class="exam-content">
                    <view class="bookmark-layout">
                        <!-- 左侧得分区域 -->
                        <view class="score-area" :class="getScoreClass(exam.score, exam.num)">
                            <view class="score-main">
                                <text class="score-label">得分</text>
                                <text class="score-num" :class="{ 'warning': exam.correct < Math.ceil(exam.num * 0.85) }">{{ exam.score }}</text>
                                <text class="score-unit">分</text>
                            </view>
                            <view class="score-divider">
                                <view class="divider-hole"></view>
                            </view>
                        </view>
                        
                        <!-- 右侧信息区域 -->
                        <view class="info-area">
                            <!-- 统计信息行 -->
                            <view class="stats-row">
                                <view class="stat-item">
                                    <text class="num correct">{{ exam.correct }}</text>
                                    <text class="label">正确</text>
                                </view>
                                <view class="stat-item">
                                    <text class="num wrong">{{ exam.wrong }}</text>
                                    <text class="label">错误</text>
                                </view>
                                <view class="stat-item">
                                    <text v-if="type != 2" class="num unanswered">{{ exam.num - exam.correct - exam.wrong }}</text>
                                    <text v-else class="num unanswered">{{ exam.none }}</text>
                                    <text class="label">未答</text>
                                </view>
                            </view>
                            
                            <!-- 时间信息行 -->
                            <view class="time-row">
                                <text class="time-text">用时：{{ timeDifference(exam.createDate,exam.updateTime) }}</text>
                                <text class="time-text">交卷：{{ formatTime(exam.createDate) }}</text>
                            </view>
                            
                            <!-- 按钮行 -->
                            <view class="btn-row">
                                <button class="btn-detail btn-wrong" @click="handleDetail(exam, 'wrong')">
                                    <text>错题练习</text>
                                </button>
                                <button v-if="type != 2" class="btn-detail btn-view" @click="handleDetail(exam, 'view')">
                                    <text>查看试卷</text>
                                </button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 加载更多提示 -->
            <view class="load-more" v-if="examList.length > 0">
                <text v-if="hasMore">上拉加载更多</text>
                <text v-else>没有更多数据了</text>
            </view>
        </scroll-view>

        <!-- 无数据提示 -->
        <view class="empty-state" v-if="examList.length === 0">
            <view class="empty-icon">📝</view>
            <text class="empty-text">暂无考试记录</text>
            <button class="btn-start-empty" @click="handleStartExam(query.opc)">
                <text>开始考试</text>
                <text class="iconfont icon-erjiyemianjiantou01"></text>
            </button>
        </view>
        <guideStep v-if="guideStepShow" :step="step"></guideStep>
    </view>
</template>

<script>
import { getUserPaperList, getUserSubPaper, getSubOnePaperList } from '@/http/question.js'
import { formatTime, timeDifference } from '@/utils/tools.js'
import guideStep from "@/components/xky-guideStep/xky-guideStep.vue";

export default {
    components: {
        guideStep
    },
    data() {
        return {
            step: {
                name: 'question-guide',
                repeat: true,
                guideList: [
                    {
                        el: '.type-swiper',
                        tips: '滑动切换工种',
                    }
                ]
            },
            formatTime,
            timeDifference,
            typeList: [], // 工种列表
            examList: [], // 考试记录列表
            currentType: null, // 当前选中的工种
            userInfo: null, // 用户信息
            query: {
                pageNum: 1, // 当前页码
                pageSize: 10, // 每页条数
                opc: null // 工种
            },
            circular:false,
            isRefreshing: false,
            hasMore: true,
            isLoading: false,
            current: 0,
            previous: '0rpx',
            next: '0rpx',
            total: 0,
            type: 0, // 0理论 1 实操科目三 2实操科目一
        }
    },
    computed: {
        passCount() {
            return this.examList.filter(exam => {
                const passingScore = Math.ceil(exam.num * 0.85)
                return exam.correct >= passingScore
            }).length
        }
    },

    onLoad(options) {
        this.type = options.type || 0
        this.opcData = uni.getStorageSync('opcData')
        this.userInfo = uni.getStorageSync('userinfo')
        let token = uni.getStorageSync('token')
        if(!token){
            uni.showModal({
				title: '请登录',
				content: '请先登录，否则无法继续操作',
				confirmText: '去登录',
				confirmColor: '$uni-color-primary',
				cancelText: '取消',
				cancelColor: '#666',
				success: (e) => {
					if (e.confirm) {
					uni.navigateTo({
						url: '/pages/login/login',
						complete: () => {
							}
						})
					}else{
						uni.switchTab({
							url: '/pages/index/index',
							success: () => {
							}
						})
					}
				}
			})
        }
        if (this.type == 1) {
            this.circular = false
            this.guideStepShow = false
            this.orderList = this.userInfo.courses.filter(item => {
                if (item.opc == options.opc) {
                    return item
                }
            })
        }
        if(this.type == 0){
            this.circular = true
            let index = this.userInfo.courses.findIndex(item => {
                if (item.opc == options.opc) {
                    return item
                }
            })
            this.query.opc = this.userInfo.courses[0].opc
            if (this.userInfo.courses.length > 0) {
                this.previous = '0'
                this.next = '60rpx'
                this.orderList = this.userInfo.courses
                this.guideStepShow = true
            }
            this.current = index
        }
        if(this.type == 2){
            this.circular = false
            this.guideStepShow = false
            this.orderList = this.userInfo.courses.filter(item => {
                if (item.opc == options.opc) {
                    return item
                }
            })
        }
        this.query.opc = options.opc
        this.loadData()
    },

    methods: {
        async loadData(isRefresh = false) {
            uni.showLoading({
                title: '加载中...',
                mask: true
            })
            if (this.isLoading) return

            try {
                this.isLoading = true

                if (isRefresh) {
                    this.query.pageNum = 1
                    this.examList = []
                }

                let res
                if (this.type == 0) {
                    res = await getUserPaperList(this.query)
                } 
                if (this.type == 1) {
                    let data = await getUserSubPaper(this.query)
                    res = {
                        data: {
                            ...data.data,
                            list: data.data.list.map(item => {
                                return {
                                    id: item.id,
                                    correct: item.fitCount,
                                    createDate: item.startTime,
                                    num: item.noneCount + item.fitCount + item.errCount,
                                    score: item.score,
                                    updateTime: item.commitTime,
                                    wrong: item.errCount,
                                }
                            })
                        }
                    }
                    console.log(res);
                }
                if(this.type == 2){
                    let data = await getSubOnePaperList(this.query)
                    res = {
                        data: {
                            ...data.data,
                            list: data.data.list.map(item => {
                                return {
                                    id: item.id,
                                    correct: JSON.parse(item.rightIds).length,
                                    createDate: item.createTime,
                                    num: JSON.parse(item.userIds).length,
                                    score: item.score,
                                    updateTime: item.startTime,
                                    wrong: JSON.parse(item.errIds).length,
                                    name: item.name,
                                    none:JSON.parse(item.noneIds).length
                                }
                            })
                        }
                    }
                }

                if (!res) {
                    throw new Error('获取数据失败')
                }

                const list = res.data.list || []
                this.total = res.data.total

                this.examList = isRefresh ? list : [...this.examList, ...list]
                this.hasMore = list.length >= this.query.pageSize

            } catch (err) {
                console.error('获取考试记录失败:', err)
                uni.showToast({
                    title: '加载失败',
                    icon: 'none'
                })
            } finally {
                console.log('finally');
                
                uni.hideLoading()
                this.isLoading = false
                if (isRefresh) {
                    this.isRefreshing = false
                }
            }
        },

        // 下拉刷新
        async onRefresh() {
            this.isRefreshing = true
            await this.loadData(true)
        },

        // 上拉加载更多
        async loadMore() {
            if (!this.hasMore || this.isLoading) return

            this.query.pageNum++
            await this.loadData()
        },

        // 处理工种数据
        processTypeData(data) {
            // 按工种分组统计
            const typeMap = {}
            data.forEach(exam => {
                if (!typeMap[exam.opc]) {
                    typeMap[exam.opc] = {
                        opc: exam.opc,
                        name: exam.opcname,
                        examCount: 0,
                        passCount: 0
                    }
                }
                typeMap[exam.opc].examCount++
                // 计算85%的题目数量作为合格分数线
                const passingScore = Math.ceil(exam.num * 0.85)
                if (exam.correct >= passingScore) {
                    typeMap[exam.opc].passCount++
                }
            })
            return Object.values(typeMap)
        },

        // 加载指定工种的考试记录
        loadExamList(opc) {
            // 过滤并格式化考试记录

        },

        // 处理工种切换
        handleTypeChange(e) {
            const index = e.detail.current
            console.log(this.orderList,index, 'index');
            this.query.opc = this.orderList[index].opc
            this.query.pageNum = 1 // 重置页码
            this.examList = [] // 清空列表
            this.hasMore = true // 重置加载状态
            this.loadData()
        },
        handleItemClick(index) {
            console.log(index, 'index');
            this.current = index
        },
        handleStartExam(opc) {
            if(this.type == 2){ 
                uni.navigateTo({
                    url: `/pages/question/subject1?opc=${opc}&type=1`
                })
            }
            if(this.type == 0){
                uni.navigateTo({
                    url: `/pages/question/exam?opc=${opc}&type=4&opcname=${this.opcData.opcname}`
                })
            }
            if(this.type == 1){
                uni.navigateTo({
                    url: `/pages/question/questionList?opc=${opc}&type=2&opcname=${this.opcData.opcname}&mode=2`
                })
            }
        },
        handleDetail(item, val) {
            console.log(item, val,this.type, `/pages/question/questionList?id=${item.id}&type=3&opc=${this.opcData.opc}&opcname=${this.opcData.opcname}`);
            // return
            // type 1 科目三  0 理论
            if (val == 'wrong') {
                if (item.wrong == 0) {
                    uni.showToast({
                        title: '暂无错题',
                        icon: 'none'
                    })
                    return
                }
                if (this.type == 1) {
                    uni.navigateTo({
                        url: `/pages/question/questionList?id=${item.id}&mode=2&type=3&opc=${this.opcData.opc}&opcname=${this.opcData.opcname}`
                    })
                }
                if (this.type == 0) {
                    uni.navigateTo({
                        url: `/pages/question/questionList?id=${item.id}&type=3&opc=${this.opcData.opc}&opcname=${this.opcData.opcname}`
                    })
                }
                if(this.type == 2){
                    uni.navigateTo({
                        url: `/pages/question/subject1?id=${item.id}&type=1&mode=1`
                    })
                }

            } else {
                if(this.type == 1){
                    uni.navigateTo({
                        url: `/pages/question/questionList?id=${item.id}&mode=2&type=5&opc=${this.opcData.opc}&opcname=${this.opcData.opcname}&display=true`
                    })
                }else{
                    uni.navigateTo({
                        url: `/pages/question/questionList?id=${item.id}&type=5&opc=${this.opcData.opc}&opcname=${this.opcData.opcname}&display=true`
                    })
                }
            }
                 },
         // 根据分数获取样式类名
         getScoreClass(score, total) {
             const percentage = (score / total) * 100
             if (percentage >= 80) {
                 return 'score-good' // 良好：80-100分
             } else if (percentage >= 70) {
                 return 'score-average' // 中等：70-79分
             } else {
                 return 'score-fail' // 不及格：70分以下
             }
         },
         // 格式化时间
         // formatTime(time) {
         //     const date = new Date(time)
         //     return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
         // }
    }
}
</script>

<style lang="scss" scoped>
.paper-list {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #FC3826 0%, #F49D95 40%, #F7F6F9 100%);
    background-size: 100% 320rpx;
    background-repeat: no-repeat;

    .swiper-container {
        padding: 12rpx 0;
        background: transparent;
    }

    .type-swiper {
        height: 220rpx;

        .type-item {
            padding: 0 16rpx;
        }

        .type-card {
            height: 220rpx;
            background: linear-gradient(135deg, #FFFFFF 0%, #F8F9FA 100%);
            box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
            border-radius: 20rpx;
            color: #333;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 3rpx;
                background: linear-gradient(90deg, #FD3523, #FF6B5B);
                opacity: 0;
                transition: opacity 0.3s;
            }

            &.active {
                transform: translateY(-3rpx);
                box-shadow: 0rpx 12rpx 32rpx 0rpx rgba(253, 53, 35, 0.15);
                border: 2rpx solid rgba(253, 53, 35, 0.2);

                &::before {
                    opacity: 1;
                }
            }

            .btn-start {
                position: absolute;
                right: 0;
                top: 16rpx;
                background: linear-gradient(135deg, #FD3523, #FF6B5B);
                box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(253, 53, 35, 0.25);
                border-radius: 28rpx 0rpx 0rpx 28rpx;
                color: #fff;
                padding: 10rpx 16rpx;
                font-size: 24rpx;
                font-weight: 600;
                display: flex;
                align-items: center;
                transition: all 0.3s;

                &:active {
                    transform: scale(0.95);
                }

                .iconfont {
                    margin-left: 6rpx;
                    font-size: 20rpx;
                }
            }

            .type-info {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 16rpx 0;

                .type-info-box {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 24rpx 12rpx 24rpx;
                }

                .type-name {
                    font-size: 32rpx;
                    font-weight: 700;
                    color: #2C3E50;
                }

                .type-stats {
                    display: flex;
                    justify-content: space-around;
                    padding: 0 16rpx;

                    .stat-item {
                        text-align: center;
                        flex: 1;
                        position: relative;

                        &:not(:last-child)::after {
                            content: '';
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 1rpx;
                            height: 50%;
                            background: linear-gradient(180deg, transparent, #E0E0E0, transparent);
                        }

                        .stat-num {
                            font-size: 42rpx;
                            font-weight: 800;
                            display: block;
                            margin-bottom: 6rpx;
                            color: #2C3E50;

                            &.success {
                                color: #27AE60;
                            }

                            &.warning {
                                color: #E74C3C;
                            }
                        }

                        .stat-label {
                            font-size: 22rpx;
                            color: #7F8C8D;
                            font-weight: 500;
                        }

                        &.highlight {
                            .stat-num {
                                font-size: 46rpx;
                                background: linear-gradient(135deg, #FD3523, #FF6B5B);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                background-clip: text;
                            }
                        }
                    }
                }
            }
        }
    }

    .exam-list {
        flex: 1;
        overflow: hidden;
        padding: 0 8rpx;

        .exam-item {
            margin: 8rpx 0;
            padding: 16rpx;
            border-radius: 12rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);
            transition: all 0.3s;
            border: 1rpx solid rgba(0, 0, 0, 0.04);

            &:active {
                transform: scale(0.98);
            }

            &.low-score {
                border-left: 4rpx solid #E74C3C;
                background: linear-gradient(135deg, #FFFFFF 0%, #FFF5F5 100%);
            }

            .exam-header {
                display: flex;
                justify-content: space-between;
                margin-bottom: 12rpx;
                padding-bottom: 8rpx;
                border-bottom: 1rpx solid #F0F0F0;

                .exam-type {
                    font-size: 28rpx;
                    font-weight: 700;
                    color: #2C3E50;
                }

                .exam-time {
                    font-size: 24rpx;
                    color: #95A5A6;
                }
            }

            .exam-content {
                .bookmark-layout {
                    display: flex;
                    background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
                    border-radius: 16rpx;
                    overflow: hidden;
                    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);

                                         .score-area {
                         width: 140rpx;
                         background: linear-gradient(135deg, #2386FF 0%, #1E88E5 100%);
                         color: #fff;
                         position: relative;
                         display: flex;
                         flex-direction: column;
                         justify-content: center;
                         align-items: center;
                         padding: 16rpx 0;
                         transition: all 0.3s ease;

                         // 良好：80-100分 - 绿色渐变
                         &.score-good {
                             background: linear-gradient(135deg, #27AE60 0%, #2ECC71 100%);
                             color: #fff;

                             .score-num {
                                 color: #FFFFFF; // 纯白色，与绿色背景形成对比
                                 text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.4);
                             }

                             .score-label {
                                 color: rgba(255, 255, 255, 0.9);
                                 text-shadow: 0rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
                             }

                             .score-unit {
                                 color: rgba(255, 255, 255, 0.8);
                                 text-shadow: 0rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
                             }
                         }

                         // 中等：70-79分 - 黄色渐变
                         &.score-average {
                             background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
                             color: #fff;

                             .score-num {
                                 color: #8B4513; // 深棕色，与黄色背景形成对比
                                 text-shadow: 0rpx 2rpx 4rpx rgba(255, 255, 255, 0.8);
                             }

                             .score-label {
                                 color: #8B4513; // 深棕色，与黄色背景形成对比
                                 text-shadow: 0rpx 1rpx 2rpx rgba(255, 255, 255, 0.8);
                             }

                             .score-unit {
                                 color: #8B4513; // 深棕色，与黄色背景形成对比
                                 text-shadow: 0rpx 1rpx 2rpx rgba(255, 255, 255, 0.8);
                             }
                         }

                         // 不及格：70分以下 - 红色渐变
                         &.score-fail {
                             background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
                             color: #fff;

                             .score-num {
                                 color: #FFFFFF; // 纯白色，与红色背景形成对比
                                 text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.4);
                             }

                             .score-label {
                                 color: rgba(255, 255, 255, 0.9);
                                 text-shadow: 0rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
                             }

                             .score-unit {
                                 color: rgba(255, 255, 255, 0.8);
                                 text-shadow: 0rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
                             }
                         }

                        .score-main {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 8rpx;

                                                         .score-label {
                                 font-size: 20rpx;
                                 font-weight: 600;
                                 color: rgba(255, 255, 255, 0.9);
                                 text-shadow: 0rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
                             }

                             .score-num {
                                 font-size: 48rpx;
                                 font-weight: 800;
                                 line-height: 1;
                                 color: #fff;
                                 text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.3);

                                 &.warning {
                                     color: #FFD700;
                                     text-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
                                 }
                             }

                             .score-unit {
                                 font-size: 16rpx;
                                 font-weight: 600;
                                 color: rgba(255, 255, 255, 0.8);
                                 text-shadow: 0rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
                             }
                        }

                        .score-divider {
                            position: absolute;
                            right: -8rpx;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 16rpx;
                            height: 16rpx;
                            background: #F8F9FA;
                            border-radius: 50%;
                            box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);

                            .divider-hole {
                                width: 8rpx;
                                height: 8rpx;
                                background: #E9ECEF;
                                border-radius: 50%;
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                            }
                        }
                    }

                    .info-area {
                        flex: 1;
                        padding: 16rpx;
                        display: flex;
                        flex-direction: column;
                        gap: 12rpx;

                        .stats-row {
                            display: flex;
                            justify-content: space-around;
                            align-items: center;

                            .stat-item {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 4rpx;

                                .num {
                                    font-size: 32rpx;
                                    font-weight: 800;
                                    line-height: 1;

                                    &.correct {
                                        color: #27AE60;
                                    }

                                    &.wrong {
                                        color: #E74C3C;
                                    }

                                    &.unanswered {
                                        color: #95A5A6;
                                    }
                                }

                                .label {
                                    font-size: 18rpx;
                                    color: #6C757D;
                                    font-weight: 600;
                                }
                            }
                        }

                        .time-row {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 6rpx 0;
                            border-top: 1rpx solid rgba(0, 0, 0, 0.05);
                            border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

                            .time-text {
                                font-size: 20rpx;
                                color: #6C757D;
                                font-weight: 500;
                            }
                        }

                        .btn-row {
                            display: flex;
                            gap: 8rpx;

                            .btn-detail {
                                flex: 1;
                                font-size: 22rpx;
                                font-weight: 600;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                height: 48rpx;
                                border-radius: 8rpx;
                                transition: all 0.3s;
                                border: none;

                                &.btn-wrong {
                                    background: linear-gradient(135deg, #FFF5F5 0%, #FFE6E6 100%);
                                    color: #E74C3C;
                                    border: 1rpx solid #FFB3B3;

                                    &:active {
                                        background: linear-gradient(135deg, #FFE6E6 0%, #FFCCCC 100%);
                                    }
                                }

                                &.btn-view {
                                    background: linear-gradient(135deg, #FD3523 0%, #FF6B5B 100%);
                                    color: #fff;
                                    box-shadow: 0rpx 3rpx 10rpx 0rpx rgba(253, 53, 35, 0.25);

                                    &:active {
                                        transform: translateY(2rpx);
                                        box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(253, 53, 35, 0.25);
                                    }
                                }
                            }
                        }
                    }
                }
            }


        }

        .load-more {
            text-align: center;
            padding: 16rpx 0;
            color: #95A5A6;
            font-size: 22rpx;
            font-weight: 500;
        }
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80rpx 32rpx;
        color: #95A5A6;

        .empty-icon {
            font-size: 100rpx;
            margin-bottom: 16rpx;
            opacity: 0.6;
        }

        .empty-text {
            font-size: 28rpx;
            margin-bottom: 32rpx;
            font-weight: 600;
        }

        .btn-start-empty {
            background: linear-gradient(135deg, #FD3523 0%, #FF6B5B 100%);
            color: #fff;
            padding: 16rpx 32rpx;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0rpx 6rpx 20rpx 0rpx rgba(253, 53, 35, 0.25);
            transition: all 0.3s;

            &:active {
                transform: translateY(2rpx);
                box-shadow: 0rpx 3rpx 12rpx 0rpx rgba(253, 53, 35, 0.25);
            }

            .iconfont {
                margin-left: 8rpx;
                font-size: 24rpx;
            }
        }
    }
}
</style>
